<template>
  <div class="flex-container">
    <div class="flex-main">
      <h1 class="flex-title">
        Catch My Breath
      </h1>
      <div class="switch">
        <div v-for="(item,index) in switchItems" :key="index" :class="[{'active':(index + 1) === scrollIndex}]" class="item" @click="handleChangeScroll(index + 1)">{{ item }}</div>
      </div>
      <transition-group name="fade">
        <div v-for="(list, flexIndex) in flexList" v-show="scrollIndex === flexIndex + 1 && flexList" :key="flexIndex" class="flex-content">
          <div v-for="(item, index) in list" :key="index" class="content-item">
            <div class="item" @click="handleClickItem(item.one)">
              <img v-lazy="item.one.img" alt="">
              <div class="mark"></div>
            </div>
            <div class="item" @click="handleClickItem(item.two)">
              <img v-lazy="item.two.img" alt="">
              <div class="mark"></div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
  <ImagePreview :image-url="imageUrl" :show="showImage" @close="handleImageClose"/>
</template>

<script lang="ts" setup>
import {ref, onMounted, Ref} from "vue"
import {getFlexList} from "@/api/request";
import ImagePreview from "@/components/ImagePreview/index.vue";

// 定义每个元素的结构
interface Image {
  img: string;
  // 其他可能的属性...
}

// 定义每个对象的结构
interface Item {
  one: Image;
  two: Image;
  // 其他可能的属性...
}

// 声明一个 ref，类型为 Item 对象数组的引用
const flexList = ref<Item[][]>([]);
const scrollIndex: Ref<number> = ref(1)
const switchItems = ['一年四季', '喜欢的歌手', '我的项目',]
const showImage = ref(false)
const imageUrl = ref('')

function handleImageClose() {
  showImage.value = false
}

function handleClickItem(item: any) {
  imageUrl.value = item.img
  showImage.value = true
}

function handleChangeScroll(index: any) {
  const mainContainer = document.getElementById("main-container");
  if (mainContainer) {
    mainContainer.scrollTop = 0
  }
  scrollIndex.value = index
  initFlexList()
}

function initFlexList() {
  getFlexList().then(res => {
    flexList.value = res.data
  })
}

onMounted(() => {
  initFlexList()
})

</script>

<style lang="scss" scoped>
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translateY(30px);
}

/* 3. 确保离开的项目被移除出了布局流以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}

@keyframes flex {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.flex-container {
  height: 100vh;
  width: 100%;
  background-image: url("@/assets/images/flex-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;

  .flex-main {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;

    .flex-title {
      font-family: serif, "宋体";
      letter-spacing: 1px;
    }

    .switch {
      display: flex;
      margin-top: 30px;

      .item {
        padding: 10px 20px;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        transition: all .7s;
        cursor: pointer;
        border-radius: 25px;
        margin: 0 3px;
      }

      .active {
        background-color: #1c1f23;
        color: white;
      }
    }

    .flex-content {
      margin-top: 50px;
      height: 500px;
      width: 80%;
      display: flex;
      flex-direction: row;
      gap: 20px;

      .content-item {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          border-radius: 10px;
          transition: all linear .2s;
          box-shadow: 0 0 13px rgba(0, 0, 0, 0.22);
          position: relative;
          height: 100%;
        }

        .item {
          width: 100%;
          cursor: pointer;
          position: relative;

          &:hover img {
            border-radius: 0;
          }

          .mark {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            overflow: hidden;

            &:hover::before {
              transform: translateX(0) skewX(-10deg) scaleX(1.35);
            }

            &::before {
              content: "";
              display: block;
              position: absolute;
              height: 100%;
              width: 120%;
              top: 0;
              left: 0;
              background-color: #ff4655;
              -ms-transform: translateX(-120%) skewX(-10deg);
              transform: translateX(-120%) skewX(-10deg);
              mix-blend-mode: multiply;
              -webkit-transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
              transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
              -o-transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
              transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
              z-index: 1;
            }
          }
        }
      }
    }
  }
}
</style>
